<template>
    <el-dialog :visible.sync="visible" style="max-height: 800px;
     overflow-y: auto" width="60%" :close-on-click-modal="false" append-to-body @close="handleClose">
        <div class="body">
            <div id="print" class="container">
                <div class="item_1-1">出库过磅单
                </div>
                <div class="item_1-2">
                    <div id="qrcode-meitan">
                    </div>
                </div>
                <div class="item_2-1">出厂日期:
                </div>
                <div class="item_2-2">{{ form.pzsj }}
                </div>
                <div class="item_2-3">第 {{ form.ddbdcs }} 次打印
                </div>
                <div class="item_2-4">单据号:
                </div>
                <div class="item_2-5">{{ form.czbh }}
                </div>
                <div class="item_3-1">收货单位
                </div>
                <div class="item_3-2">{{ form.khmc }}
                </div>
                <div class="item_4-1">发货单位
                </div>
                <div class="item_4-2">呼伦贝尔东北阜丰生物科技有限公司
                </div>
                <div class="item_x-1">车牌号
                </div>
                <div class="item_x-2">{{ form.chehao }}
                </div>
                <div class="item_x-3">部门
                </div>
                <div class="item_x-4">{{ form.ckmc }}
                </div>
                <div class="item_x-5">皮重
                </div>
                <div class="item_x-6">{{ form.pz }}
                </div>
                <div class="item_x-1">货物名称
                </div>
                <div class="item_x-2">{{ form.wlmc }}
                </div>
                <div class="item_x-3">规格
                </div>
                <div class="item_x-4">{{ form.guige }}
                </div>
                <div class="item_x-5">毛重
                </div>
                <div class="item_x-6">{{ form.mzsj }}
                </div>
                <div class="item_x-1">净重大写
                </div>
                <div class="item_x-2">{{ convertToChinese(form.jz) }}
                </div>
                <div class="item_x-3">扣杂质
                </div>
                <div class="item_x-4">{{ form.jz - form.jszl }}
                </div>
                <div class="item_x-5">结算重
                </div>
                <div class="item_x-6">{{ form.jszl }}
                </div>
                <div class="item_x-1">原始单号
                </div>
                <div class="item_x-2">
                </div>
                <div class="item_xxx">
                </div>
                <div class="item_x-5">
                    <br />
                </div>
                <div class="item_x-6">
                </div>
                <div class="item_x-1">进厂时间
                </div>
                <div class="item_x-2">{{ form.mzsj }}
                </div>
                <div class="item_image">
                    <img src="../../../assets/logo/dongbeiZ.png" class="img" />
<<<<<<< HEAD
                    <div class="item_image_text">{{ form.pzsj }} 2025-01-01</div>
=======
                    <div class="item_image_text">{{ form.pzsj }}</div>
>>>>>>> b4a0e2dba4b1f1e0b05e6d155df4272830d06f27
                </div>

                <div class="item_x-5">原始重量
                </div>
                <div class="item_x-6">{{ }}
                </div>
                <div class="item_x-1">SAP单号
                </div>
                <div class="item_x-2">{{ form.ddbh }}
                </div>
                <div class="item_x-5">预发吨位
                </div>
                <div class="item_x-6">{{ form.ddwlsl }}
                </div>
                <div class="item_11-1">
                    白：存根，蓝：结算，红：装卸费，黄：运费，绿：统计
                </div>
                <div class="item_11-2">{{ form.dbh }}称毛重,{{ form.dbh2 }}称皮重
                </div>
            </div>
        </div>
        <el-button type="primary" class="common-button" v-print="printOptions">打印html</el-button>
    </el-dialog>
</template>
<script>
import QRCode from "qrcodejs2";
import { getMergeDD } from "@/api/system/Fdongbei/merge";
export default {
    components: {
        QRCode,
    },
    props: {
        formData: {},
    },
    data() {
        return {
            printOptions: {
                id: "print",
                popTitle: "打印文档",
                extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>',
                zIndex: 20002,
                previewBeforeOpenCallback() {
                    console.log('正在加载预览窗口！' + window.sessionStorage.getItem('czbh'));
                    // console.log(that.msg, this)
                }, // 预览窗口打开之前的callback
                beforeOpenCallback() {
                    console.log("打印窗口即将打开" + window.sessionStorage.getItem('czbh'));
                },
                openCallback() {
                    console.log("打印窗口已打开");
                    getMergeDD(window.sessionStorage.getItem('czbh')).then(response => {
                        console.log('修改成功！')
                    })
                },
                closeCallback() {
                    console.log("打印窗口已关闭");
                },
            },
            form: {},
            visible: false,
        };
    },
    methods: {
        handleClose() {
            console.log("磅单 退出");
            this.visible = false;
        },
        convertToChinese(num) {
            num = Math.floor(num);
            const chineseNumerals = ["零", "壹", "贰", "叁", "肆", "伍", "陆", "柒", "捌", "玖"];
            const numStr = num.toString();
            let result = "";

            for (let i = 0; i < numStr.length; i++) {
                const digit = parseInt(numStr.charAt(i));
                result += chineseNumerals[digit];
            }

            return result;
        },
        code() {
            this.qrcode(80, 80, this.form.czbh, "canvas");
        },

        /**
         * @description 生成二维码
         * @param  {number} qWidth  宽度
         * @param  {number} qHeight  高度
         * @param  {string} qText  二维码内容（跳转连接）
         * @param  {string} qRender 渲染方式（有两种方式 table和canvas，默认是canvas）
         */
        qrcode(qWidth, qHeight, qText, qRender) {
            const container = document.getElementById("qrcode-meitan");
            container.innerHTML = "";
            console.log(container);

            // 生成二维码
            const code = new QRCode(container, {
                text: qText,
                width: qWidth,
                height: qHeight,
                colorDark: "#000000",
                colorLight: "#ffffff",
                correctLevel: QRCode.CorrectLevel.H,
            });
        },
        // onWindowLoad() {
        //   console.log("二维码")
        //   this.$refs.qrcode.innerHTML = "";
        //   this.qrcode(124, 124, this.formData.czbh, "canvas");
        // },
        select() {
            console.log("meitan");
            this.visible = true;
            this.$nextTick(() => {
                this.code();
            });
        },
    },
};
</script>

<style scoped>
* {
    box-sizing: border-box;
}

@page {
    size: auto;
    margin: 3mm;
}

html {
    height: auto;
    margin: 0px;
}

body {
    margin: 0;
}

* {
    box-sizing: border-box;
}

.img {
<<<<<<< HEAD
    width: 180px;
    /* height: 80px; */
=======
    width: 140px;
    height: 80px;
>>>>>>> b4a0e2dba4b1f1e0b05e6d155df4272830d06f27
    position: absolute;
    /* top: 180px;
    right: 200px; */
    z-index: 100;
}

.item_image {
    width: 140px;
    height: 80px;
    position: absolute;
    top: 180px;
    right: 200px;
    z-index: 100;
}

.item_image_text {
    top: 38px;
    position: absolute;
<<<<<<< HEAD
    font-size: 16px;
=======
    font-size: 12px;
>>>>>>> b4a0e2dba4b1f1e0b05e6d155df4272830d06f27
}

.wechat-group img {
    max-width: 220px;
    height: auto;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    border-bottom-left-radius: 8px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    width: 100%;
}

.container {
    z-index: 1;
    margin-top: 28px;
    margin-right: 28px;
    margin-bottom: 28px;
    margin-left: 28px;
    display: grid;
    height: 279px;
    width: 735px;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    color: black;
    position: relative;
}

.container>* {
    display: grid;
    justify-items: center;
    align-items: center;
    margin-left: -1px;
    margin-top: -1px;
}

.item_1-1 {
    grid-column-start: 1;
    grid-column-end: 11;
    font-size: 24px;
    text-align: center;
    font-weight: 800;
}

.item_1-2 {
    display: grid;
    grid-column-start: 11;
    grid-column-end: 13;
    grid-row-start: 1;
    grid-row-end: 5;
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: black;
    border-right-color: black;
    border-bottom-color: black;
    border-left-color: black;
    border-image-source: initial;
    border-image-slice: initial;
    border-image-width: initial;
    border-image-outset: initial;
    border-image-repeat: initial;
}

.item_xxx {
    grid-column-start: 7;
    grid-column-end: 10;
    grid-row-start: 8;
    grid-row-end: 11;
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: black;
    border-right-color: black;
    border-bottom-color: black;
    border-left-color: black;
    border-image-source: initial;
    border-image-slice: initial;
    border-image-width: initial;
    border-image-outset: initial;
    border-image-repeat: initial;
}

.item_2-1 {
    grid-column-start: 1;
    grid-column-end: 2;
    font-size: 12px;
    text-align: left;
}

.item_2-2 {
    grid-column-start: 2;
    grid-column-end: 5;
    font-size: 12px;
    text-align: left;
}

.item_2-3 {
    grid-column-start: 5;
    grid-column-end: 8;
    font-size: 12px;
}

.item_2-4 {
    grid-column-start: 8;
    grid-column-end: 9;
    font-size: 12px;
    text-align: left;
}

.item_2-5 {
    grid-column-start: 9;
    grid-column-end: 11;
    font-size: 12px;
    text-align: left;
}

.item_3-1 {
    grid-column-start: 1;
    grid-column-end: 3;
    font-size: 12px;
    text-align: center;
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: black;
    border-right-color: black;
    border-bottom-color: black;
    border-left-color: black;
    border-image-source: initial;
    border-image-slice: initial;
    border-image-width: initial;
    border-image-outset: initial;
    border-image-repeat: initial;
}

.item_3-2 {
    grid-column-start: 3;
    grid-column-end: 11;
    font-size: 12px;
    text-align: center;
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: black;
    border-right-color: black;
    border-bottom-color: black;
    border-left-color: black;
    border-image-source: initial;
    border-image-slice: initial;
    border-image-width: initial;
    border-image-outset: initial;
    border-image-repeat: initial;
}

.item_4-1 {
    grid-column-start: 1;
    grid-column-end: 3;
    font-size: 12px;
    text-align: center;
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: black;
    border-right-color: black;
    border-bottom-color: black;
    border-left-color: black;
    border-image-source: initial;
    border-image-slice: initial;
    border-image-width: initial;
    border-image-outset: initial;
    border-image-repeat: initial;
}

.item_4-2 {
    grid-column-start: 3;
    grid-column-end: 11;
    font-size: 12px;
    text-align: center;
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: black;
    border-right-color: black;
    border-bottom-color: black;
    border-left-color: black;
    border-image-source: initial;
    border-image-slice: initial;
    border-image-width: initial;
    border-image-outset: initial;
    border-image-repeat: initial;
}

.item_x-1 {
    grid-column-start: 1;
    grid-column-end: 3;
    font-size: 12px;
    text-align: center;
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: black;
    border-right-color: black;
    border-bottom-color: black;
    border-left-color: black;
    border-image-source: initial;
    border-image-slice: initial;
    border-image-width: initial;
    border-image-outset: initial;
    border-image-repeat: initial;
}

.item_x-2 {
    grid-column-start: 3;
    grid-column-end: 7;
    font-size: 12px;
    text-align: center;
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: black;
    border-right-color: black;
    border-bottom-color: black;
    border-left-color: black;
    border-image-source: initial;
    border-image-slice: initial;
    border-image-width: initial;
    border-image-outset: initial;
    border-image-repeat: initial;
}

.item_x-3 {
    grid-column-start: 7;
    grid-column-end: 8;
    font-size: 12px;
    text-align: center;
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: black;
    border-right-color: black;
    border-bottom-color: black;
    border-left-color: black;
    border-image-source: initial;
    border-image-slice: initial;
    border-image-width: initial;
    border-image-outset: initial;
    border-image-repeat: initial;
}

.item_x-4 {
    grid-column-start: 8;
    grid-column-end: 10;
    font-size: 12px;
    text-align: center;
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: black;
    border-right-color: black;
    border-bottom-color: black;
    border-left-color: black;
    border-image-source: initial;
    border-image-slice: initial;
    border-image-width: initial;
    border-image-outset: initial;
    border-image-repeat: initial;
}

.item_x-5 {
    grid-column-start: 10;
    grid-column-end: 11;
    font-size: 12px;
    text-align: center;
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: black;
    border-right-color: black;
    border-bottom-color: black;
    border-left-color: black;
    border-image-source: initial;
    border-image-slice: initial;
    border-image-width: initial;
    border-image-outset: initial;
    border-image-repeat: initial;
}

.item_x-6 {
    grid-column-start: 11;
    grid-column-end: 13;
    font-size: 12px;
    text-align: center;
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: black;
    border-right-color: black;
    border-bottom-color: black;
    border-left-color: black;
    border-image-source: initial;
    border-image-slice: initial;
    border-image-width: initial;
    border-image-outset: initial;
    border-image-repeat: initial;
}

.item_11-1 {
    grid-column-start: 1;
    grid-column-end: 7;
    font-size: 12px;
}

.item_11-2 {
    grid-column-start: 7;
    grid-column-end: 13;
    font-size: 12px;
}

.body {
    height: 400px;
    width: 800px;
    background-color: aliceblue;

}

/*去除页眉页脚*/
@page {
    size: auto;
    margin: 10mm;
}

@page {
    margin-bottom: 0mm;
}
</style>

<!-- 解决 vue-print-nb 空白页问题 -->
<style @media="print">
@page {
    size: auto;
    margin: 3mm;
}

html {
    background-color: #ffffff;
    height: auto;
    margin: 0px;
}
</style>